<template>
  <view class="maps-container">
    <map class="tui-map" :latitude="lat" :longitude="lng" :markers="covers" :scale="12" show-location></map>
    <scroll-view scroll-y class="scrollView" :style="{height:scrollH +'px'}">
      <view class="tui-list">
        <view class="tui-list-cell" :class="[index==stores.length-1?'tui-cell-last':'']" v-for="(item,index) in stores"
          :key="index">
          <view class="addr-title">
            <text>{{item.deptName}}</text>
          </view>
          <view class="addr-box ">
            <view class="addr-detail">
              <view class="addr-detail-item">
                <tui-icon name="position" :size="14" color="#999"></tui-icon>
                <text class="tui-pl">营业时间为：{{item.shopOfficeTime}}</text>
              </view>
              <view class="addr-detail-item">
                <tui-icon name="position" :size="14" color="#999"></tui-icon>
                <text class="tui-pl">{{item.addressDetail}}</text>
              </view>
            </view>
            <view class="addr-opera">
              <view class="opera-box " hover-class="tui-opcity" :hover-stay-time="150 " @tap="go" :data-store="item">
                <image src="/static/images/store/go.png" mode="widthFix" class="opera-btn"></image>
                <text class="opera-distance">{{item.distance? '距你' + item.distance+ 'km' : '未知'}}</text>
              </view>
            </view>
          </view>
        </view>
        <van-loading type="spinner" color="#1989fa" v-if="loading" size="24px" class="loadingClass">加载中...</van-loading>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    getList
  } from "@/api/shop";
  import {
    mapGetters,
    mapActions,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        lat: '',
        lng: '',
        covers: [],
        scrollH: 260,
        loading: true,
        stores: []
      }
    },
    onLoad(options) {
      setTimeout(() => {
        let winHeight = uni.getSystemInfoSync().windowHeight;
        this.scrollH = winHeight - uni.upx2px(600);
        if (this.currentLocation.isDefault) {
          this.getCurrentLocation().then(() => {
            this.lat = this.currentLocation.latitude;
            this.lng = this.currentLocation.longitude;
            this.getStores();
          }).catch(error => {
            this.loading = false;
            uni.showToast({
              title: "获取位置信息失败，请检查是否打开位置权限",
              icon: 'none',
              duration: 2000
            })
            this.getStores();
          })
        } else {
          this.lat = this.currentLocation.latitude;
          this.lng = this.currentLocation.longitude;
          this.getStores();
        }
      }, 50)
    },
    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: "猫咪科尔鸭主题馆",
        path: '/pages/tarbar/index/index',
        imageUrl: "http://dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210105/1baeee01a05a273297c65145c2b6398b.jpg"
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: "猫咪科尔鸭主题馆",
        path: '/pages/tarbar/index/index',
        imageUrl: "http://dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210105/1baeee01a05a273297c65145c2b6398b.jpg"
      };
    },
    // #endif
    computed: {
      ...mapGetters('m_user',['currentLocation'])
    },
    methods: {
      ...mapActions('m_user',['getCurrentLocation']),

      getStores() {
        let that = this;
        getList(this.lat, this.lng).then(res => {
          // console.log(res.data)
          that.stores = res.data;
          that.buildMarkers();
        }, error => {
          this.loading = false;
        });
      },
      buildMarkers() {

        for (let [index, item] of this.stores.entries()) {
          this.covers.push({
            id: index,
            latitude: item.latitude,
            longitude: item.longitude,
            title: item.deptName,
            iconPath: "/static/images/store/location.png",
            width: 40,
            height: 40
          });
        }
        this.loading = false;
      },
      go(event) {
        const store = event.currentTarget.dataset.store;

        //返回并刷新上一页面
        this.$eventHub.$emit('emit', store)
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style>
  page {
    height: 100%;
  }

  .tui-list {
    background-color: #fff;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tui-list-cell {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .tui-list-cell::after {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 30rpx;
  }

  .tui-cell-last::after {
    border-bottom: 0;
  }

  .maps-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .tui-map {
    width: 100%;
    height: 600rpx;
    display: block;
  }

  .scrollView {
    width: 100%;
    /* padding-bottom: 100rpx; */
    background-color: #fff;
  }

  .tui-list-cell {
    display: initial;
    padding: 30rpx;
  }

  .addr-title {
    font-size: 36rpx;
    line-height: 40rpx;
    color: #000;
    font-weight: bold;
    width: 100%;
    /* padding-bottom: 20rpx; */
  }

  .addr-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .addr-detail {
    width: 450rpx;
  }

  .addr-detail-item {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    align-items: center;
    justify-content: space-between;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

  }

  .tui-pl {
    padding-left: 4rpx;
    line-height: 30rpx;
    font-size: 24rpx;
    color: rgba(61, 61, 61, 0.5);
  }

  .addr-opera {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .opera-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3px;
  }

  .opera-distance {
    color: #999;
    font-size: 24rpx;
    line-height: 24rpx;
  }

  .opera-btn {
    color: #333;
    display: block;
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 20rpx;
  }

  .loadingClass {
    width: 100%;
    position: fixed;
    bottom: 280rpx;
    display: flex;
    justify-content: center;
  }
</style>
